<template>
  <div class="sub-category">
    <div class="container">
      <!-- 面包屑 -->
      <SubBread />
      <!-- 筛选区 -->
      <!-- <SubFilter /> -->
      <!-- 筛选区 -->
      <div class="list-container">
        <div class="sub-filter">
          <div class="item">
            <div class="head">品牌：</div>
            <div class="body">
              <a
                href="javascript:;"
                v-for="brand in SubCategoryData.brands"
                :key="brand.id"
                >{{ brand.name }}</a
              >
            </div>
          </div>
          <div
            class="item"
            v-for="item in SubCategoryData.saleProperties"
            :key="item.id"
          >
            <div class="head">{{ item.name }}：</div>
            <div class="body">
              <a
                href="javascript:;"
                v-for="i in item.properties"
                :key="i.id"
                @click="toggleSelected(i, item)"
                :class="{ active: i.selected === true }"
                >{{ i.name }}</a
              >
            </div>
          </div>
        </div>
        <!-- 排序区域 -->
        <SubSort />
        <!-- 列表区域 -->
        <SubList />
        <!-- 加载更多组件 -->
        <!-- 是否再加载，由父组件得到状态去判断 正在加载就不再触发事件-->
        <!-- 数据是否加载完毕，同样有父组件得到，items。length===0 -->
        <XtxInfiniteLoad :isLoading="isLoading" :isFinished="isFinished" />
      </div>
    </div>
  </div>
</template>

<script>
import SubBread from './Sub-bread.vue'
import SubSort from './sub-sort.vue'
import SubList from './sub-List.vue'
// import SubFilter from './Sub-filter.vue'
import { findSubCategoryFilter } from '@/api/category'
import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
export default {
  name: 'SubCategory',
  components: {
    SubBread,
    SubSort,
    SubList
    // SubFilter
  },
  setup () {
    const route = useRoute()
    const SubCategoryData = ref({})
    async function loadSubData () {
      const { result } = await findSubCategoryFilter(route.params.id)
      SubCategoryData.value = result
      SubCategoryData.value.brands.unshift({
        id: null,
        name: '全部'
      })
      SubCategoryData.value.saleProperties.forEach(item => {
        item.properties.unshift({
          name: '全部',
          id: null
        })
        item.properties.forEach(i => {
          i.selected = false
        })
      })
      console.log(SubCategoryData.value)
    }
    // 给没个规格添加专门用来控制激活的字段 点击是否高亮
    function toggleSelected (i, item) {
      item.properties.forEach(item => {
        item.selected = false
      })
      i.selected = true
    }
    onMounted(() => {
      loadSubData()
    })
    // 是否正在加载中
    const isLoading = ref(true)
    const isFinished = ref(false)
    return {
      SubCategoryData, toggleSelected, isLoading, isFinished
    }
  }
}
</script>
<style scoped lang='less'>
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
}
.list-container {
  margin-top: 20px;
  padding: 0 20px;
  background-color: #fff;
}
// 筛选区
.sub-filter {
  background: #fff;
  padding: 25px;
  .item {
    display: flex;
    padding: 10px 0;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        margin-right: 36px;
        transition: all 0.3s;
        &.active,
        &:hover {
          color: @xtxColor;
        }
      }
    }
  }
}
.goods-item {
  flex: 1;
}
</style>
